<template>
	<view>
		<!-- 优惠券 -->
		<u-popup :show="showCoupon" @close="cancel" mode="bottom">
			<view style="height: 928rpx;">
				<view class="" style="box-shadow: 0px 6px 12px 0px rgba(51,51,51,0.1400)">
					<u-tabs :list="couponList" @click="couponChange" lineColor="#EB6D5F"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 94rpx;width:100px;font-size:14px">
					</u-tabs>
				</view>
				<view v-if="couponIndex == 0">
					<div class="nodata">
						<img src="/static/icon/shopCar/pic_qidai@2x.png" alt="" srcset="">
						<view class="no-price">
							暂无优惠券~
						</view>
					</div>
				</view>
				<view v-if="couponIndex == 1">
					<text>出淤泥而不染，濯清涟而不妖</text>
				</view>
				<view v-if="couponIndex == 2">
					<text>出淤泥而不染，濯清涟而不妖</text>
				</view>
				<view class="no-use-button">
					<u-button color="#FA625D" shape="circle" @click="cancel" :customStyle="customStyleOne">
						不使用红包
					</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "coupon-select",
		props: {
			showCoupon: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				couponList: [{
					name: '可用',
				}, {
					name: '可领取',
				}, {
					name: '不可用'
				}],
				couponIndex: 0,
				customStyleOne: {
					width: '700rpx',
					height: '75rpx',
					borderRadius: '38rpx',
					margin: '25rpx',
					fontSize: '28rpx',
				}
			};
		},
		methods: {
			cancel() {
				this.$emit('showCoupon', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		text-align: center;

		img {
			height: 375rpx;
			width: 456rpx;
			margin: 51rpx 142rpx 16rpx;
		}

		.no-price {
			height: 27rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 36rpx;

		}
	}

	.no-use-button {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 124rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 24px 0px rgba(51, 51, 51, 0.1800);
		box-sizing: border-box;
	}
</style>
